<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        body{margin:0;padding:0;overflow: hidden;} 
        .city{width:100%;position:fixed;bottom:0px;z-index: 100;} 
        .city img{width: 100%;}
        audio{
            opacity: 0;
        }
    </style>
    <title>
        黎黎520，嫁给我吧！
    </title>
    <link href="modal.css" rel="stylesheet"/>
    <style>
    .music{
        position: fixed;
        right: 4%;
        top: 2%;
        width: 120px;
        height: 120px;
        z-index: 999999;
        opacity:0.5
    }
    .musicRotate{
        animation-name:musicrotate;
        animation-duration: 4s; /*动画时间*/
        animation-timing-function:linear;
        -webkit-animation-timing-function:linear; /* Safari 和 Chrome */
        animation-fill-mode: both; /*播放后的状态*/
        animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
    }
    @keyframes musicrotate{
        0%{-webkit-transform:rotate(0deg);}
        25%{-webkit-transform:rotate(90deg);}
        50%{-webkit-transform:rotate(180deg);}
        75%{-webkit-transform:rotate(270deg);}
        100%{-webkit-transform:rotate(360deg);}
    }
    </style>
</head>
<body onselectstart="return false">
    <script>
    function playMusic(obj) {
        var player = $("#music")[0]; /*jquery对象转换成js对象*/
        if (player.paused){ /*如果已经暂停*/
            player.play(); /*播放*/
            $(obj).addClass('musicRotate');
            $(obj).attr('src','musicP.png')
        }else {
            player.pause();/*暂停*/
            $(obj).removeClass('musicRotate');
            $(obj).attr('src','musicS.png')
        }
    }
    </script>
<img onClick="playMusic(this)" class="music musicRotate" src="musicP.png">
<!--对话部分-->
<div class="share_img"><img src="a8b.png" alt=""></div>

<div class="page_one">
    <div class="content">
        <div class="text_wrapper">
            <img src="a8.png" alt="">
            <div class="text">
                黎黎小可爱，哥哥很爱你，你愿意嫁给我吗？
            </div>
        </div>
    </div>
    <div class="btn-groups">
        <div class="heart-btn">
            <div id="yes" class="btn btn-a"><span>愿意</span></div>
        </div>
        <div id="no" class="btn btn-b"><span>不愿意</span></div>
    </div>
</div>
<!--烟花部分-->
<canvas id='cas' style="background-color:rgba(0,5,24,1)">
    浏览器不支持canvas
</canvas>
<div class="city">
    <img src="city.png" alt="" />
</div>
<img src="moon.png" alt="" id="moon" style="visibility: hidden;" />
<div style="display:none">
    <div class="shape">
        黎黎我爱你
    </div>
    <div class="shape">
        感谢遇见你
    </div>
    <div class="shape">
        执子之手
    </div>
    <div class="shape">
        共度余生
    </div>
    <div class="shape">
        永不分离
    </div>
</div>
<!--音乐部分-->
<audio autoplay loop id="music">
    <source src="love.mp3" />
</audio>
<iframe  id="iframMusic" allow="autoplay" style="display:none" src="blank.mp3"></iframe>
<script src="jquery.min.js"></script>
<script src="fire.js"></script>
<script src="talk.js"></script>
</body>

</html>